import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class GoodsItem extends StatelessWidget {
  const GoodsItem({super.key});

   // 1. 提供的数据
  static const Map orderInfo = {
    'createTime': "2024-08-15 21:49:48",
    'orderState': "待发货",
    'image':
        "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
    'name': "茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯",
    'totalNum': 2,
    'curPrice': 119.5,
    'attrsText': "规格: 白色240ml"
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 1. 导航条
      appBar: AppBar(
        title: const Text('案例-商品订单信息', style: TextStyle(color: Colors.white),),
        backgroundColor: Colors.pink,
        centerTitle: true,
      ),
      // 2. 主体内容
      body: Container(
        padding: const EdgeInsets.all(15),
        child: Column(
          children: [
            // 2.1 日期 和 订单状态
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(orderInfo['createTime']),
                Text(orderInfo['orderState'], style: const TextStyle(color: Colors.deepOrange),)
              ],
            ),
            // 2.2 图片 + 名称 + 数量 + 规格 + 单价
            Padding(
              padding: const EdgeInsets.only(top: 10),
              child: Row(
                children: [
                  // 2.2.1 左侧图片
                  Image.network(orderInfo['image'], width: 100, height: 100, fit: BoxFit.cover,),
                  // 2.2.2 右侧
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(left: 8),
                      child: Column(
                        // 侧轴左对齐
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          // 右侧上部第一行
                          Row(
                            children: [
                              // 标题
                              Expanded(
                                child: Text(orderInfo['name'])
                              ),
                              // 数量
                              Padding(
                                padding: const EdgeInsets.only(left: 8),
                                child: Text('x ${orderInfo['totalNum']}'),
                              )
                            ],
                          ),
                          // 右侧第二行
                          Padding(
                            padding: const EdgeInsets.only(top: 8),
                            child: Container(
                              padding: const EdgeInsets.only(left: 8, right: 8, top: 2, bottom: 2),
                              decoration: BoxDecoration(
                                color: const Color.fromARGB(255, 232, 228, 227),
                                borderRadius: BorderRadius.circular(3)
                              ),
                              child: Text(orderInfo['attrsText'], style: const TextStyle(color: Color.fromARGB(255, 111, 111, 111)),),
                            ),
                          ),
                          // 右侧第三行
                          Padding(
                            padding: const EdgeInsets.only(top: 8),
                            child: Text("¥ ${orderInfo['curPrice']}",),
                          )
                        ],
                      ),
                    )
                  ),
                ],
              ),
            ),
            // 3. 合计
            Padding(
              padding: const EdgeInsets.only(top: 8),
              child: Container(
                // color: Colors.red,
                alignment: Alignment.centerRight,
                child: Text('合计: ¥${orderInfo['curPrice'] * orderInfo['totalNum']}'),
              ),
            ),
            // 4. 再次购买
            Padding(
              padding: const EdgeInsets.only(top: 8),
              child: Container(
                // color: Colors.red,
                alignment: Alignment.centerRight,
                child: Container(
                  padding: const EdgeInsets.only(left: 5, right: 5, top: 3, bottom: 3),
                  decoration: BoxDecoration(
                    border: Border.all(color: const Color.fromARGB(255, 56, 55, 55)),
                    borderRadius: BorderRadius.circular(3)
                  ),
                  child: const Text('再次购买', style: TextStyle(color: Color.fromARGB(255, 36, 31, 31)),),
                )
              ),
            )
          ],
        ),
      ),
    );
  }
}
